<template>
  <view>
    <up-popup
        :show="show"
        :round="10"
        :closeOnClickOverlay="true"
        @close="close"
        @open="open">
      <view class="contact-page">
        <!-- 标题 -->
        <view class="page-header">
          <text class="title">联系我，备注来意</text>
        </view>

        <!-- 客服电话模块 -->
        <view class="contact-item" @click="callPhone">
          <text class="contact-text">
            QQ联系：
            <text class="phone-number">{{ 1173089798 }}</text>
          </text>
        </view>

        <!-- 微信二维码模块 -->
        <view class="wechat-container">
          <text class="contact-text">长按添加好友</text>
          <image class="qr-code" mode="widthFix" :show-menu-by-longpress="true" :src="qrCode"></image>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import {ref, defineProps} from 'vue';

// 定义接收的参数
const props = defineProps({
  //是否关闭底部的导航
  isCloseBar: {
    type: Boolean,
    required: false, // 表示必须传递
    default: true,    //默认关闭
  },
});

const show = ref(false);

// 打开弹窗并传入 item
const open = () => {
  show.value = true;
  if (props.isCloseBar) {
    uni.hideTabBar();
  }
}

// 关闭弹窗
const close = () => {
  show.value = false;
  if (props.isCloseBar) {
    uni.showTabBar();
  }
}

// 微信二维码图片地址
const qrCode = ref("http://47.120.20.74:9898/qrCode.jpg");

// 拨打电话逻辑
const callPhone = () => {
  uni.makePhoneCall({
    phoneNumber: phone.value,
    success() {
      console.log("拨打电话成功");
    },
    fail() {
      console.log("拨打电话失败");
    },
  });
};

const previewImage = e => {
  uni.previewImage({
    // 需要预览的图片链接列表
    urls: [],
    // 为当前显示图片的链接/索引值
    current: 'http://47.120.20.74:9898/qrCode.jpg',
    // 图片指示器样式
    indicator: 'default',
    // 是否可循环预览
    loop: false,
    // 长按图片显示操作菜单，如不填默认为保存相册
    // longPressActions:{
    // 	itemList:[this.l('发送给朋友'),this.l]
    // },
    success: res => {
      console.log('res', res);
    },
    fail: err => {
      console.log('err', err);
    }
  });

}

defineExpose({
  open
})
</script>

<style scoped lang="scss">
/* 页面容器 */
.contact-page {
  padding: 20rpx;
  height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 40rpx;
  margin-top: 20px;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 联系方式模块 */
.contact-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20rpx 0;
  padding: 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  width: 80%;
}

.contact-text {
  font-size: 30rpx;
  color: #333;
}

.phone-number {
  color: #2979ff;
  font-weight: bold;
}

/* 微信二维码模块 */
.wechat-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30rpx;
  width: 80%;
}

.qr-code {
  margin-top: 20rpx;
  width: 300rpx;
  height: 300rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}
</style>
